<template>
  <el-dialog res="dialog" :title="title" :visible.sync="show" width="800px" :before-close="handleClose"
             class="yy-user-info-dialog">
    <el-form label-width="150px" inline>
      <el-form-item style="width: 100%;" label="头像:" v-if="userInfo.userAttach">
        <el-popover placement="right" title="" trigger="click">
          <img :src="userInfo.userAttach.path" alt="">
          <img slot="reference" :src="userInfo.userAttach.path" alt="" style="max-height: 50px;max-width: 50px">
        </el-popover>
      </el-form-item>
      <el-form-item label="用户编号:">{{userInfo.idNo}}</el-form-item>
      <el-form-item label="手机号码:">{{userInfo.mobile}}</el-form-item>
      <el-form-item label="真实姓名:">
        <span v-if="userInfo.tfsUserAuth">{{userInfo.tfsUserAuth.custName}}</span>
        <span v-else class="text-warning">未实名</span>
      </el-form-item>
      <el-form-item label="昵称:">{{userInfo.nickname}}</el-form-item>
      <el-form-item label="性别:">{{typeFormat(userInfo,'gender')}}</el-form-item>
      <el-form-item label="生日:">{{userInfo.birthday}}</el-form-item>
      <el-form-item label="用户状态:">{{typeFormat(userInfo,'status')}}</el-form-item>

      <el-form-item label="是否显示:" v-if="userInfo.role===2">
        {{userInfo.stylist?(userInfo.stylist.isShow===0?'显示':'隐藏'):''}}
      </el-form-item>

      <el-form-item label="是否显示:" v-if="userInfo.role===3">
        {{userInfo.store?(userInfo.store.isShow===0?'显示':'隐藏'):''}}
      </el-form-item>


      <el-form-item label="职级:" v-if="userInfo.role===2">{{userInfo.stylist?userInfo.stylist.position:''}}
      </el-form-item>
      <el-form-item label="从业时间:" v-if="userInfo.role===2">{{(userInfo.stylist?userInfo.stylist.practitioner:'')}}
      </el-form-item>
      <el-form-item label="门店名称:" v-if="userInfo.role===3">{{(userInfo.store?userInfo.store.storename:'')}}
      </el-form-item>
      <el-form-item label="爱好:" v-if="userInfo.role===1">{{userInfo.hobby}}</el-form-item>
      <el-form-item label="发长:" v-if="userInfo.role===1">{{userInfo.yyHairstyle?userInfo.yyHairstyle.name:''}}</el-form-item>
      <el-form-item label="脸型:" v-if="userInfo.role===1">{{userInfo.yyFeature?userInfo.yyFeature.name:''}}</el-form-item>
      <el-form-item label="工作:" v-if="userInfo.role===1">{{userInfo.job}}</el-form-item>
      <el-form-item label="来源:">{{userInfo.channel}}</el-form-item>
      <el-form-item label="邀请码:">{{userInfo.userCode?userInfo.userCode.invitecode:''}}</el-form-item>
      <el-form-item label="创建时间:">{{userInfo.createtime}}</el-form-item>
      <el-form-item style="width: 100%" label="位置:">
        <span
          v-if="userInfo.role===1||userInfo.role===2">{{userInfo.userLocation?userInfo.userLocation.location:''}}</span>
        <span v-else-if="3">{{userInfo.userLocation?userInfo.userLocation.provinceName+userInfo.userLocation.cityName+userInfo.userLocation.districtName+userInfo.userLocation.location:''}}</span>
        <span v-else>未知</span>
      </el-form-item>
      <el-form-item style="width: 100%;white-space:normal" label="个人介绍:" v-if="userInfo.role===2">
        {{userInfo.selfIntroduction}}
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
  import {getUserById} from "@/api/common";

  export default {
    props: {
      item: {
        type: Object,
        required: false
      },
      show: {
        type: Boolean,
        required: false
      }
    },
    data() {
      return {
        title: '',
        statusOptions: [],
        genderOptions: [],
        userInfo: {
          idNo:'',
          mobile:'',
          gender:'',
          stylist:{},
          tfsUserAuth:{},
          store:{},
          userAttach:{}
        },
        open: false
      }
    },
    created() {
      console.log(this.item);
      this.getDicts("sys_user_sex").then(response => {
        this.genderOptions = response.data;
      });
      this.getDicts("yy_user_status").then(response => {
        this.statusOptions = response.data;
      });
      getUserById({id: this.item.userId, role: this.item.role}).then(res => {
        this.userInfo = res.data;
        if (this.userInfo.role === 1) {
          this.title = '用户详情';
        }
        if (this.userInfo.role === 2) {
          this.title = '美发师详情';
        }
        if (this.userInfo.role === 3) {
          this.title = '门店详情';
        }
      });
    },
    methods: {
      handleClose() {
        this.$emit('close', '');
      },
      typeFormat(row, column) {
        let option;
        if (column === 'gender') {
          option = this.genderOptions;
        } else if (column === 'status') {
          option = this.statusOptions;
        }
        return this.selectDictLabel(option, row[column]);
      },
    }
  }
</script>

<style>
  .yy-user-info-dialog .el-dialog {
    margin-top: 5vh !important;
  }

  .yy-user-info-dialog .el-dialog__body {
    padding: 20px 20px;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .yy-user-info-dialog .el-form {
    font-size: 0;
  }

  .yy-user-info-dialog label {
    width: 90px;
    color: #99a9bf;
  }

  .yy-user-info-dialog .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
    white-space: nowrap;
  }

  .yy-user-info-dialog .el-form-item__content {
    width: 70%;
    text-overflow: ellipsis;
    overflow: hidden;
  }
</style>
